.slider-container {
                                        /* display: flex; */
                                        max-width: 100%;
                                        /* margin: 20px; */
                                        margin-top: 30px;
                                    }

                                    .main-image {
                                        flex: 1;

                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }

                                    .main-image img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                        transition: opacity 0.3s ease-in-out;
                                    }

                                    .thumbnails {
                                        /* width: 300px; */
                                        /* Updated thumbnail width */
                                        display: flex;
                                        /* flex-direction: column; */
                                        padding: 20px 0px;
                                        gap: 10px;
                                        overflow-y: auto;
                                    }

                                    .main-image img {
                                        opacity: 1;
                                        transition: opacity 0.9s ease-in-out;
                                    }

                                    .main-image img.fade-out {
                                        opacity: 0;
                                    }

                                    .thumbnails img {
                                        width: 100%;
                                        height: 140px;
                                        cursor: pointer;
                                        border: 2px solid transparent;
                                        transition: 0.3s;
                                    }

                                    .thumbnails img:hover,
                                    .thumbnails img.active {
                                        border: 2px solid rgb(60 134 196);
                                    }

                                    /* === Responsive view: thumbnails as row below === */
                                    @media (max-width: 768px) {
                                        .slider-container {
                                            flex-direction: column;
                                            gap: 15px;
                                            margin: 0px;
                                        }

                                        .main-image {
                                            flex: 1 1 100%;
                                        }

                                        .thumbnails {
                                            width: 100%;
                                            flex-direction: row;
                                            flex-wrap: nowrap;
                                            overflow-x: auto;
                                            overflow-y: hidden;
                                            padding: 5px 0px;
                                            max-width: 100%;
                                        }

                                        .thumbnails img {
                                            width: 120px;
                                            height: 90px;
                                            flex-shrink: 0;
                                        }
                                    }

                                    @media (max-width: 480px) {
                                        .thumbnails img {
                                            width: 100px;
                                            height: 70px;
                                        }
                                    }











                                     .slider-container2 {
                                        /* display: flex; */
                                        flex-wrap: wrap;
                                        max-width: 100%;
                                        margin: 20px auto;
                                        gap: 10px;
                                    }

                                    .main-image2 {
                                        flex: 1 1 70%;
                                        min-width: 0;
                                    
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }

                                    .main-image2 img {
                                        width: 100%;
                                        height: 100%;
                                       
                                        object-fit: cover;
                                        transition: opacity 0.3s ease-in-out;
                                       
                                    }

                                    .main-image2 img.fade-out {
                                        opacity: 0;
                                    }

                                    .thumbnails2 {
                                        flex: 1 1 300px;
                                        /* max-width: 400px; */
                                        display: flex;
                                        /* flex-direction: column; */
                                        padding: 20px 0px;
                                        gap: 10px;
                                        overflow-y: auto;
                                    }

                                    .thumbnails2 img {
                                        width: 100%;
                                        height: 195px;
                                        object-fit: cover;
                                        cursor: pointer;
                                        border: 2px solid transparent;
                                        transition: 0.3s;
                                        border-radius: 5px;
                                    }

                                    .main-image2 img {
                                        transition: opacity 0.9s ease-in-out;
                                    }

                                    .main-image2 img.fade-out {
                                        opacity: 0;
                                    }

                                    .thumbnails2 img:hover,
                                    .thumbnails2 img.active {
                                        border: 2px solid #3073b5;
                                    }

                                    /* ===== Responsive View (≤ 768px): thumbnails as horizontal row below ===== */
                                    @media (max-width: 768px) {
                                        .slider-container2 {
                                            flex-direction: column;
                                            gap: 15px;
                                        }

                                        .thumbnails2 {
                                            flex: 100%;
                                        }

                                        .main-image2 {
                                            flex: 1 1 100% !important;
                                        }

                                        .thumbnails2 {
                                            flex-direction: row;
                                            /* flex-wrap: nowrap; */
                                            overflow-x: auto;
                                            /* overflow-y: hidden; */
                                            /* padding: 5px 10px; */
                                            max-width: 100%;
                                        }

                                        .thumbnails2 img {
                                            width: 120px;
                                            height: 90px;
                                            flex-shrink: 0;
                                        }
                                    }

                                    @media (max-width: 480px) {
                                        .thumbnails2 img {
                                            width: 100px;
                                            height: 70px;
                                        }
                                    }.slider-container3 {
    /* display: flex; */
    flex-wrap: wrap;
    max-width: 100%;
    margin: 20px auto;
    gap: 10px;
}

.main-image3 {
    flex: 1 1 70%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.main-image3 img.fade-out {
    opacity: 0;
}

.thumbnails3 {
    flex: 1 1 300px;
    /* max-width: 400px; */
    display: flex;
    /* flex-direction: column; */
    padding: 20px 0px;
    gap: 10px;
    overflow-y: auto;
}

.thumbnails3 img {
    width: 100%;
    height: 245px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
    /* border-radius: 5px; */
}

.main-image3 img {
    transition: opacity 0.9s ease-in-out;
}

.main-image3 img.fade-out {
    opacity: 0;
}

.thumbnails3 img:hover,
.thumbnails3 img.active {
    border: 2px solid #2a65ac;
}

/* ===== Responsive View (≤ 768px): thumbnails as horizontal row below ===== */
@media (max-width: 768px) {
    .slider-container3 {
        flex-direction: column;
        gap: 15px;
    }

    .thumbnails3 {
        flex: 100%;
    }

    .main-image3 {
        flex: 1 1 100% !important;
    }

    .thumbnails3 {
        flex-direction: row;
        overflow-x: auto;
        max-width: 100%;
    }

    .thumbnails3 img {
        width: 120px;
        height: 90px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .thumbnails3 img {
        width: 100px;
        height: 70px;
    }
}
.slider-container4 {
    /* display: flex; */
    flex-wrap: wrap;
    max-width: 100%;
    margin: 20px auto;
    gap: 10px;
}

.main-image4 {
    flex: 1 1 70%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.main-image4 img.fade-out {
    opacity: 0;
}

.thumbnails4 {
    flex: 1 1 300px;
    /* max-width: 400px; */
    display: flex;
    /* flex-direction: column; */
    padding: 20px 0px;
    gap: 10px;
    overflow-y: auto;
}

.thumbnails4 img {
    width: 100%;
    height: 144px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
    border-radius: 5px;
}

.main-image4 img {
    transition: opacity 0.9s ease-in-out;
}

.main-image4 img.fade-out {
    opacity: 0;
}

.thumbnails4 img:hover,
.thumbnails4 img.active {
    border: 2px solid #245ba5;
}

/* ===== Responsive View (≤ 768px): thumbnails as horizontal row below ===== */
@media (max-width: 768px) {
    .slider-container4 {
        flex-direction: column;
        gap: 15px;
    }

    .thumbnails4 {
        flex: 100%;
    }

    .main-image4 {
        flex: 1 1 100% !important;
    }

    .thumbnails4 {
        flex-direction: row;
        overflow-x: auto;
        max-width: 100%;
    }

    .thumbnails4 img {
        width: 120px;
        height: 90px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .thumbnails4 img {
        width: 100px;
        height: 70px;
    }
}